<template>
  <el-card>
    <div slot="header">
      <h3>查看品类标签-关联品类</h3>
    </div>
    <div>
      <TextTooltip
        label="品类标签名称"
        :text-content="labelInfo.name"
      />
      <skus-table
        ref="skusTable"
        showPagination
        :tableHeight="480"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <!-- 按钮操作栏 -->
        <BtnRender slot="content_context" :render="renderBtnsBar" />
      </skus-table>
    </div>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import TextTooltip from '@/components/ShowContent/TextTooltip';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
import { createExcelByExport, generateUuid } from '@/utils/bizUtils';
import { TableInfo } from '@/utils/getUtils';
import skusPage from '@/mixins/commodity/skusPage';
import { TABLE_COLUMNS } from './constants/view';
import {
  viewCategoryLabelSearchService,
  exportCategoryService,
  exportFourthLevelCategoryService,
} from '@/api/basics/categoryManage/categoryLabelManage';
export default {
  mixins: [skusPage],
  components: {
    SkusTable,
    BtnRender,
    TextTooltip
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      btnLoading: {
        export: false, // 导出品类loading
        exportByFourLevel: false, // 按四级类导出品类loading
      },
    }
  },
  created () {
    this.updateTableData()
  },
  computed: {
    // label信息
    labelInfo () {
      const { uuid = '', name = '' } = this.$route.query ?? {}
      return { uuid, name }
    },
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btns = [
        {
          label: '导出品类',
          method: this.handleExport,
          loading: this.btnLoading.export,
          disabled: this.TableInfo.isNullList(),
        },
        {
          label: '按四级类导出品类',
          method: this.handleExportByFourLevel,
          loading: this.btnLoading.exportByFourLevel,
          disabled: this.TableInfo.isNullList(),
        }
      ]
      return getListPageBtnsBar(h, btns)
    },
    // 获取表格数据
    getTableData () {
      this.updateTableData()
    },
    // 更新表格数据
    async updateTableData () {
      const data = {
        labelUuid: this.labelInfo?.uuid,
        ...this.paginationParams
      }
      const res = await viewCategoryLabelSearchService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData?.results ?? [])
      this.setTotalNum(res?.retData?.totalNum ?? 0)
    },
    // 导出品类
    async handleExport () {
      const data = { labelUuid: this.labelInfo?.uuid }
      const loadingFn = state => { this.btnLoading.export = state }
      const res = await exportCategoryService(data, loadingFn)
      createExcelByExport({ excelTitle: `导出品类_${generateUuid()}`, res })
    },
    // 按四级类导出品类
    async handleExportByFourLevel () {
      const data = { labelUuid: this.labelInfo?.uuid }
      const loadingFn = state => { this.btnLoading.exportByFourLevel = state }
      const res = await exportFourthLevelCategoryService(data, loadingFn)
      createExcelByExport({ excelTitle: `导出四级品类_${generateUuid()}`, res })
    },
  }
}
</script>
